<template>
  <div class="product-container">
    <h2>Product</h2>
    <ul>
      <li
      v-for="item in products"
      :key="item.id"
      >
        <span>{{ item.title }}</span> - <span>{{ item.price }}</span> - 库存{{item.inventory}}
        <br>
        <button @click="addProductToCart(item)">Add to cart</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  name: 'Product',
  components: {},
  props: {},
  data () {
    return {
    }
  },
  computed: {
    ...mapState('products', {
      products: 'all'
    })
  },
  watch: {},
  mounted () {
    this.getAllProducts()
  },
  methods: {
    ...mapActions('products', ['getAllProducts']),
    ...mapActions('cart', ['addProductToCart'])
  }
}

</script>
<style lang='less' scoped>
</style>
